<template>
  <div class="sidebar">
    <!-- Start Logobar -->
    <div class="logobar">
      <a href="index" class="logo logo-large"
        ><img src="@/assets/images/logo.svg" class="img-fluid" alt="logo"
      /></a>
      <a href="/index" class="logo logo-small"
        ><img src="@/assets/images/small_logo.svg" class="img-fluid" alt="logo"
      /></a>
    </div>
    <!-- End Logobar -->
    <!-- Start Profilebar -->
    <div class="profilebar text-center">
      <img
        class="breadcrumbbar img-fluid"
        src="@/assets/images/users/profile.svg"
        alt="profile"
      />
      <div class="profilename">
        <h5 class="text-white">Shourya Kumar</h5>
        <p>Social Media Strategist</p>
      </div>
      <div class="userbox">
        <ul class="list-inline mb-0">
          <li class="list-inline-item">
            <a href="#" class="profile-icon"
              ><img
                src="@/assets/images/svg-icon/user.svg"
                class="img-fluid"
                alt="user"
            /></a>
          </li>
          <li class="list-inline-item">
            <a href="#" class="profile-icon"
              ><img
                src="@/assets/images/svg-icon/email.svg"
                class="img-fluid"
                alt="email"
            /></a>
          </li>
          <li class="list-inline-item">
            <a href="#" class="profile-icon"
              ><img
                src="@/assets/images/svg-icon/logout.svg"
                class="img-fluid"
                alt="logout"
            /></a>
          </li>
        </ul>
      </div>
    </div>
    <!-- End Profilebar -->
    <!-- Start Navigationbar -->
    <div class="navigationbar active">
      <ul class="vertical-menu">
        <li class="vertical-header">Main</li>
        <menu-group
          name="dashboard"
          iconName="dashboard"
        >
          <ul class="vertical-submenu menu-open">
            <menu-item name="Social Media" path="index" />
            <menu-item name="eCommerce" path="dashboard-ecommerce" />
            <menu-item name="Analytics" path="dashboard-analytics" />
          </ul>
        </menu-group>
        <menu-group name="布局" iconName="layouts">
          <ul class="vertical-submenu menu-open">
            <menu-item name="light-vertical" path="light-vertical" />
            <menu-item name="light-horizontal" path="light-horizontal" />
            <menu-item name="dark-vertical" path="dark-vertical" />
            <menu-item name="dark-horizontal" path="dark-horizontal" />
          </ul>
        </menu-group>
        <menu-group name="应用" iconName="apps">
          <ul class="vertical-submenu menu-open">
            <menu-item name="apps-calender" path="apps-calender" />
            <menu-item name="app-chat" path="app-chat" />
            <menu-item name="Email" path="email" :hasSub="true">
              <menu-item name="EmailIndex" path="email-index" />
              <menu-item name="Emailopen" path="email-open" />
              <menu-item name="Emailcompose" path="email-compose" />
            </menu-item>
            <menu-item name="kanban-board" path="kanban-board" />
            <menu-item name="onboarding" path="onboarding" />
          </ul>
        </menu-group>
        <li class="vertical-header">Components</li>
        <menu-group badgeTitle="New" name="组件" iconName="widgets">
          <ul class="vertical-submenu menu-open">
            <menu-group name="Basic UI Kits" iconName="basic">
              <ul class="vertical-submenu menu-open">
                <menu-item name="Alerts" path="basic-ui-kits-alerts" />
                <menu-item name="Badges" path="basic-ui-kits-badges" />
                <menu-item name="Button" path="basic-ui-kits-button" />
                <menu-item name="Card" path="basic-ui-kits-card" />
                <menu-item name="Carousel" path="basic-ui-kits-carousel" />
                <menu-item name="Dropdowns" path="basic-ui-kits-cropdowns" />
                <menu-item name="Embeds" path="basic-ui-kits-embeds" />
                <menu-item name="Grids" path="basic-ui-kits-grids" />
                <menu-item name="Dropdowns" path="basic-ui-kits-cropdowns" />
                <menu-item name="Images" path="basic-ui-kits-images" />
                <menu-item name="Media" path="basic-ui-kits-media" />
                <menu-item name="Models" path="basic-ui-kits-models" />
                <menu-item
                  name="Paginations"
                  path="basic-ui-kits-paginations"
                />
                <menu-item name="Popovers" path="basic-ui-kits-popovers" />
                <menu-item
                  name="Progress Bar"
                  path="basic-ui-kits-progress-bar"
                />
                <menu-item name="Spinners" path="basic-ui-kits-Spinners" />
                <menu-item name="Tabs" path="basic-ui-kits-tabs" />
                <menu-item name="Toast" path="basic-ui-kits-toast" />
                <menu-item name="Tooltips" path="basic-ui-kits-tooltips" />
                <menu-item name="Typography" path="basic-ui-kits-typography" />
              </ul>
            </menu-group>
          </ul>
        </menu-group>
        <menu-group badgeTitle="New" name="高级组件" iconName="advanced">
          <ul class="vertical-submenu menu-open">
            <menu-item name="Image Crop" path="advanced-ui-kits-image-crop" />
            <menu-item
              name="jQuery Confirm"
              path="advanced-ui-kits-jquery-confirm"
            />
            <menu-item name="Nestable" path="basic-ui-kits-button" />
            <menu-item name="Pnotify" path="basic-ui-kits-card" />
            <menu-item name="Range Slider" path="basic-ui-kits-carousel" />
            <menu-item name="Ratings" path="basic-ui-kits-cropdowns" />
            <menu-item name="Session Timeout" path="basic-ui-kits-embeds" />
            <menu-item name="Sweet Alerts" path="basic-ui-kits-grids" />
            <menu-item name="Switchery" path="basic-ui-kits-cropdowns" />
            <menu-item name="Toolbar" path="basic-ui-kits-images" />
            <menu-item name="Tour" path="basic-ui-kits-media" />
            <menu-item name="Tree View" path="basic-ui-kits-models" />
          </ul>
        </menu-group>
        <menu-group badgeTitle="New" name="表单" iconName="form_elements">
          <ul class="vertical-submenu menu-open">
            <menu-item name="Form Inputs" path="form-inputs" />
            <menu-item name="Form Groups" path="form-groups" />
            <menu-item name="Form Layouts" path="form-layouts" />
            <menu-item name="Form Color Pickers" path="form-colorpickers" />
            <menu-item name="Form Date Picker" path="form-date-picker" />
            <menu-item name="Form Editor" path="form-editor" />
            <menu-item name="FormFileUploads" path="form-file-uploads" />
            <menu-item name="Form Input Mask" path="form-input-mask" />
            <menu-item name="Form MaxLength" path="form-max-length" />
            <menu-item name="Form Selector" path="form-selector" />
            <menu-item name="Form Touchspin" path="form-touchspin" />
            <menu-item name="Form Validations" path="form-validations" />
            <menu-item name="Form-Wizards" path="form-wizards" />
            <menu-item name="Form X-editable" path="form-x-editable" />
          </ul>
        </menu-group>

        <menu-group badgeTitle="New" name="图标" iconName="icons">
          <ul class="vertical-submenu menu-open">
            <menu-item name="Theta Icons" path="icon-theta" />
            <menu-item name="Dripicons" path="icon-dripicons" />
            <menu-item name="Feather" path="icon-feather" />
            <menu-item name="Flag" path="icon-flag" />
            <menu-item name="Font Awesome" path="icon-font-awesome" />
            <menu-item name="Ion Icons" path="icon-ionicons" />
            <menu-item name="Line Awesome" path="icon-lineawesome" />
            <menu-item name="Material Design" path="icon-material-design" />
            <menu-item name="Simple Line Icons" path="icon-simple-line" />
            <menu-item name="Socicon" path="icon-socicon" />
            <menu-item name="Themify" path="icon-themify" />
            <menu-item name="Typicons" path="typicons" />
          </ul>
        </menu-group>
        <menu-group name="图表" iconName="chart">
          <ul class="vertical-submenu menu-open">
            <menu-item name="C3 Chart" path="chart-c3" />
            <menu-item name="Chartist Chart" path="chart-chartistjs" />
            <menu-item name="Chartjs Chart" path="chart-chartjs" />
            <menu-item name="Flot Chart" path="chart-flot" />
            <menu-item name="Knob Chart" path="chart-knob" />
            <menu-item name="Morris Chart" path="chart-morris" />
            <menu-item name="Piety Chart" path="chart-piety" />
            <menu-item name="Sparkline Chart" path="chart-sparkline" />
          </ul>
        </menu-group>

        <menu-group name="表格" iconName="tables">
          <ul class="vertical-submenu menu-open">
            <menu-item name="Bootstrap Table" path="table-bootstrap" />
            <menu-item name="Data Table" path="table-data-table" />
            <menu-item name="Editable Table" path="table-editable-table" />
            <menu-item name="FooTable" path="table-footable" />
            <menu-item name="RWD Table" path="table-rwd" />
          </ul>
        </menu-group>

        <menu-group name="地图" iconName="maps">
          <ul class="vertical-submenu menu-open">
            <menu-item name="谷歌地图" path="map-google" />
            <menu-item name="矢量地图" path="map-vector" />
          </ul>
        </menu-group>

        <li class="vertical-header">Extras</li>
        <menu-group name="eCommerce" iconName="ecommerce">
          <ul class="vertical-submenu menu-open">
            <menu-item name="产品列表" path="ecommerce-product-list" />
            <menu-item name="产品详细" path="ecommerce-product-detail" />
            <menu-item name="订单列表" path="ecommerce-order-list" />
            <menu-item name="订单详细" path="ecommerce-order-detail" />
            <menu-item name="购物车" path="ecommerce-shop" />
            <menu-item name="Single Product" path="ecommerce-single-product" />
            <menu-item name="Cart" path="ecommerce-cart" />
            <menu-item name="Check Out" path="ecommerce-checkout" />
            <menu-item name="Thank You" path="ecommerce-thank-you" />
            <menu-item name="My Account" path="ecommerce-my-account" />
          </ul>
        </menu-group>

        <menu-group name="Basic Pages" iconName="pages">
          <ul class="vertical-submenu menu-open">
            <menu-item name="Starter Page" path="page-starter" />
            <menu-item name="Blog" path="page-blog" />
            <menu-item name="FAQ" path="page-faq" />
            <menu-item name="Gallery" path="page-gallery" />
            <menu-item name="Invoice" path="page-invoice" />
            <menu-item name="Pricing" path="page-pricing" />
            <menu-item name="Timeline" path="page-timeline" />
          </ul>
        </menu-group>
        <menu-group name="User Pages" iconName="user">
          <ul class="vertical-submenu menu-open">
            <menu-item name="Login" path="user-login" />
            <menu-item name="Register" path="user-register" />
            <menu-item name="Forgot Password" path="user-forgotpsw" />
            <menu-item name="Lock Screen" path="user-lock-screen" />
            <menu-item name="Invoice" path="page-invoice" />
            <menu-item name="Pricing" path="page-pricing" />
            <menu-item name="Timeline" path="page-timeline" />
          </ul>
        </menu-group>
        <menu-group name="错误页面" iconName="error">
          <ul class="vertical-submenu menu-open">
            <menu-item name="Coming Soon" path="error-comingsoon" />
            <menu-item name="Maintenance" path="error-maintenance" />
            <menu-item name="404" path="error-404" />
            <menu-item name="500" path="error-500" />
          </ul>
        </menu-group>
      </ul>
    </div>
  </div>
  <!-- End Navigationbar -->
</template>

<script>
import MenuGroup from "@/components/menu/menu-group.vue";
import MenuItem from "@/components/menu/menu-item.vue";
export default {
  name: "SideBar",
  components: { MenuGroup, MenuItem },
  /**
   * 侧边导航栏
   */
  crerated() {
    console.log("sidebar created");
  },
  methods: {
    menuGroupClicked: function (e) {
      console.log(e);
    },
  },
};
</script>

<style scoped lang='scss'>
.sidebar {
  width: 250px;
  height: 100%;
  background-color: #212229;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 9;
  transition: all 0.3s ease;
}
</style>
